<template>

	<div>
		<div class="cal_index">
			<div class="calindex_item1 af">
				<div class="calidx_it1_left">
					<h4>欢迎回来！{{this.title.gr.username}}！</h4>
					<p class="name">{{this.title.gr.username}}</p>
					<p class="sex">性别：{{this.title.gr.gender==1?'男':''}}{{this.title.gr.gender==2?'女':''}}{{this.title.gr.gender==''?'暂未设置':''}}{{this.title.gr.gender==null?'暂未设置':''}}</p>
					<p class="account">用户账号：{{this.title.gr.name}}</p>
				</div>
				<div class="calidx_it1_right">
					<div class="item it1">
						<h3 class="cal_index_tit"><img src="~/assets/img/cal_index_money.png">我的钱包<a href="/CpersonalCenter/Cwallet?idx=3"></a></h3>
						<ul class="list af">
							<li class="zengsong">
								<img src="~/assets/img/zengsong.png">
								<p>{{title.qbdd.giveScore}}</p>
								<p>赠送积分</p>
							</li>
							<li class="leiji">
								<img src="~/assets/img/leiji.png">
								<p>{{title.qbdd.totalScore}}</p>
								<p>累计积分</p>
							</li>
						</ul>
					</div>
					<div class="item it2">
						<h3 class="cal_index_tit"><img src="~/assets/img/cal_index_sc.png">我的收藏<a href="/CpersonalCenter/Ccollection?idx=5"></a></h3>
            <!--  -->
						<div class="cont" v-for="(data,id) in title.sc.collectServiceRes?title.sc.collectServiceRes.slice(0,1):[]"  :class="'li'+(id+1)" :key="id" >
							<h5 class="h1">{{data.servicename}}</h5>
							<em class="num">{{data.buyneedscore}} <span>积分</span></em>
							<div class="sc" @click="shouc(title.id,data.sid)">
								<div class="sc_pic" ><img src="~/assets/img/sc.png" alt=""></div>收藏
							</div>
						</div>
           <div class="wsc" :class="title.sc.collectServiceRes?'':'select'" >
              <img src="~/assets/img/wdsc-no.png" width="118px" style="display: block;margin: 0 auto;">
             <p style="text-align: center;font-size: 16px;color: #aaa;margin-top: 10px;">还没有任何收藏呐！</p>
           </div>
            <!--  -->
					</div>
				</div>
			</div>
			<div class="calindex_item2">
				<h3 class="cal_index_tit"><img src="~/assets/img/cal_phone.png">来电中心<a href="/CpersonalCenter/Ccall?idx=2"></a></h3>
				<div class="cal_index_table">
					<div class="callct">
						<div class="top">
              <a href="javascript:;" :class="select==0?'select':''" @mouseover="qhs(0)" style="margin-right: 30px;">业务来电信息</a>
              <a href="javascript:;" :class="select==2?'select':''" @mouseover="qhs(2)" style="margin-right: 30px;">资质来电信息</a>
              <a href="javascript:;" :class="select==1?'select':''" @mouseover="qhs(1)">我兑换的信息</a></div>
						<div class="ct">
							<table>
								<thead>
                  <tr class="tr1">
                    <th class="th1">序号</th>
                    <th class="th2">{{select==2?'资质类型':'业务名称'}}</th>
                    <th :style="select==2?'width:219px':'width:100px'">{{select==2?'资质专业':'客户姓名'}}</th>
                    <th :style="select==2?'width:150px':'width:100px'">{{select==2?'资质等级':'联系方式'}}</th>
                    <th class="th5" :style="select==2?'width:120px':''">{{select==2?'电话':'详情描述'}}</th>
                    <th class="th6">提交时间</th>
                    <th :style="select==0?'':'display:none'" style="width:90px">业务员</th>
                    <th class="th7" :style="select==1?'display:none':''">{{select==2?'状态':'操作'}}</th>
                    <th class="th7" :style="select==1?'':'display:none'">{{select==2?'状态':'操作'}}</th>
                  </tr>
								</thead>
								<tbody>
                    <tr v-for="(data,id) in dingdan.slice(0,3)" :key="id">
                      <!--v-for="(data,id) in dingdan.showNumOrderRes?dingdan.showNumOrderRes.slice(sl3*10,(sl3+1)*10):[]" :key="id">-->
                     <td :style="data.readstatus==1?'':'color: #7C8396;'">{{id+1}}</td>
                     <td :style="data.readstatus==1?'':'color: #7C8396;'">{{data.servicename}}</td>
                     <td :style="data.readstatus==1?'':'color: #7C8396;'">{{data.username}}</td>
                     <td :style="data.readstatus==1?'':'color: #7C8396;'">{{data.telphone}}</td>
                     <td :style="data.readstatus==1?'':'color: #7C8396;'"><p style="text-align: center;">{{data.content?data.content:'无详情描述'}}</p></td>
                     <td :style="data.readstatus==1?'':'color: #7C8396;'">{{data.createtime}}</td>
                     <td :style="select==0?data.readstatus==1?'':'color: #7C8396;':'display:none'">{{data.serviceusername}}</td>
                     <td class="td8" :style="select==1?'display:none':''"><a href="javascript:;" @click="data.readstatus==1?lingqu(data.id):''" :style="data.readstatus==1?'':'cursor:default;background: rgba(215, 219, 227, .6);color: #7C8396;border: 1px solid transparent;'">{{data.readstatus==1?'领取':'已兑换'}}</a></td>
                     <td class="td8" :style="select==1?'':'display:none'"><a href="javascript:;" @click="tuihuan(data.id)">退还</a></td>
                    </tr>
								</tbody>
							</table>
<!--              <div class="no-ct" :style="dingdan==[]||dingdan==null||dingdan==''?'':'display:none'">
                <div></div>
              </div> -->
						</div>
					</div>
				</div>
			</div>
			<!-- 热门展位 -->
			<div class="calindex_item3">
				<h3 class="cal_index_tit"><img src="~/assets/img/cal_index_rmzw.png">热门展位<a href="/CpersonalCenter/Cmall?idx=1"></a></h3>
				<ul class="calindexi3_list af">

          <!--  -->
            <li v-for="(i,index) in 4" class="calindexi3_item" :class="'i'+(index+1)" :key="index">
              <h5 class="tit">{{title.gj.oneTwoServiceData?title.gj.oneTwoServiceData[index].servicename:''}}</h5>
              <p class="text">{{title.gj.oneTwoServiceData[index].servicename}}广告位购买{{title.gj.oneTwoServiceData[index].buyneedscore}}积分</p>
              <em class="num">{{title.gj.oneTwoServiceData?title.gj.oneTwoServiceData[index].buyneedscore:''}} <span>积分</span></em>
              <div class="sc" @click="shouc(title.id,title.gj.oneTwoServiceData[index].id)">
              	<div :class="title.gj['collectServiceData ']!=null&&title.gj['collectServiceData '].indexOf(title.gj.oneTwoServiceData[index].id)>-1?'sc_cg':'sc_pic'"></div>收藏
              </div>
              <a class="buy" href="JavaScript:;" @click="dkgm(title.id,title.gj.oneTwoServiceData[index].id)">立即购买</a>
             </li>
          <!--  -->

				</ul>
			</div>
			<!-- 热门展位 -->

			<!-- 订单中心 -->
			<div class="calindex_item2 calindex_item4">
				<h3 class="cal_index_tit"><img src="~/assets/img/cal_index_ddzx.png">订单中心<a href="/CpersonalCenter/corder?idx=4"></a></h3>
				<div class="cal_index_table">
					<div class="callct">
						<div class="top">
              <a href="javascript:;" @mouseover=qh(0) :class="selects==0?'select':''" style="margin-right: 30px;">全部订单</a>
               <a href="javascript:;" @mouseover=qh(1) :class="selects==1?'select':''" style="margin-right: 30px;">展示中订单 </a>
               <a href="javascript:;" @mouseover=qh(2) :class="selects==2?'select':''">过期订单</a></div>
						<div class="ct">
							<table>
								<thead>
									<tr class="tr1">
										<th>序号</th>
										<th style="width: 240px;">展示位名称</th>
										<th>订单号</th>
										<th>支付积分</th>
										<th>购买日期</th>
										<th>有效期至</th>
										<th style="width: 164px;">状态 </th>
										<th>操作 </th>
									</tr>
								</thead>
								<tbody>
                  <tr v-for="(data,id) in dingdans.showNumOrderRes?dingdans.showNumOrderRes.slice(sl3*10,(sl3+1)*10):[]" :key="id">
                    <td>{{id+1}}</td>
                    <td>{{data.servicename}}</td>
                    <td>{{data.ordernumber}}</td>
                    <td style="color:#00B785;">-{{data.payscore}}</td>
                    <td>{{data.buytime}}</td>
                    <td>{{data.endtime}}</td>
                    <td :style="data.orderstatus==1?'color:#00B785;':'color:#7C8396;'">{{data.orderstatus==1?'展示中':'已过期'}}</td>
                    <td><a href="javascript:;" @click="data.orderstatus==1?tzlj(data.sid,data.pid):dkgm(data.uid,data.sid)">{{data.orderstatus==1?'查看详情':'再次购买'}}</a></td>
                  </tr>
								</tbody>

							</table>
						</div>
					</div>
				</div>
			</div>

			<!-- 订单中心 -->
		</div>
    <div class="hh-login">
   <div class="tc">
      <span>×</span>
      {{tcmsg}}
    </div>
    <div class="gmtc" :class="goumai.select==0?'':'select'">
      <div class="ct">
        <h3>{{goumai.title}}(展示位)</h3>
        <p class="p1"><span>{{goumai.jifen}}</span>积分</p>
        <p class="p2">{{goumai.title}}(展示位)</p>
        <p class="p3">当前拥有积分:{{goumai.userjf}}</p>
        <a href="javascript:;" class="ljgm" @click="gmjf(title.id,goumai.id)">立即购买</a>
        <a href="javascript:;" class="close" @click="gmgb()"></a>
      </div>
    </div>
    </div>
	</div>


</template>

<script>
  import axios from 'axios';
  import $ from 'jquery';
	export default{
		data(){
			return {
				title:null,
        select:0,
        sl3:0,
        tcmsg:'',
        sl2:[1],
        dingdan:[],
        dingdans:[],
        selects:0,
        goumai:{
          title:'',
          jifen:0,
          userjf:0,
          select:0,
          id:0
        },

			}
		},

    async asyncData ({req,params}){
      let a = req.headers.cookie;
      let cookie = '';
      if(a.indexOf('userinfoRes')!=-1){
        let b = a.split('userinfoRes=');
        let c = b[1].split(';');
        cookie = c[0];
      }
      let gr = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/UserCenter/userCenterIndexData?userid=`+cookie);
      let nh = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Header/headerData`);
      let all = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/UserCenter/allFormSubmitData?userid=`+cookie);
      let me = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/UserCenter/myFormSubmitData?userid=`+cookie);
      let a3 = 'https://exam.zhonghaiqihang.com/PInterface/UserCenter/serviceData?userid='+cookie;
      let a5 = 'https://exam.zhonghaiqihang.com/PInterface/UserCenter/allShowNumOrder?userid='+cookie;
      let nh6 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/UserCenter/inDisplayShowNumOrder?userid=`+cookie);
      let nh7 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/UserCenter/overdueShowNumOrder?userid=`+cookie);
      let nh8 = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/UserCenter/myCollectServiceData?userid=`+cookie);
      let nh5 = await axios.get(a5);
      let nh4 = await axios.get(a3);
      let data  = {nav:nh.data,id:cookie,gr:gr.data,all:all.data,me:me.data,gj:nh4.data,qbdd:nh5.data,zszdd:nh6.data,gqdd:nh7.data,sc:nh8.data,};
      return { title: data}
    },
   mounted:function(){
     this.qhs(0)
     this.qh(0)
    $('.tbnava1').addClass('select');
    function setCookie(cname,cvalue,exdays)
    {
      var d = new Date();
      d.setTime(d.getTime()+(exdays*24*60*60*1000));
      var expires = "expires="+d.toGMTString();
      document.cookie = cname + "=" + cvalue + "; " + expires;
    }
     if(this.title.gr == 'go_signin'){
       this.$router.push('/Login');
       setCookie('userinfoRes','',-1);
     }else if(this.title.gr == 'userid_error'){
       this.$router.push('/Login');
       setCookie('userinfoRes','',-1);
     }else if(this.title.gr == 'userinfo_is_null'){
       this.$router.push('/Login');
       setCookie('userinfoRes','',-1);
     }else if(this.title.gr == 'userinfo_banuse'){
       this.$router.push('/Login');
       setCookie('userinfoRes','',-1);
     }
     else if(this.title.gr == 'serviceid_is_null'){
       window.open('/Mall',_self);
     } else if(this.title.gr == 'serviceid_error'){
       window.open('/Mall',_self);
     }else if(this.title.gr == 'serviceinfo_is_null'){
       window.open('/Mall',_self);
     }else if(this.title.gr == 'serviceinfo_banuse'){
       window.open('/Mall',_self);
     }
    // if(this.title.gj == 'go_signin'){
    //   this.$router.push('/Login');
    //   setCookie('userinfoRes','',-1);
    // }else if(this.title.gj == 'userid_error'){
    //   this.$router.push('/Login');
    //   setCookie('userinfoRes','',-1);
    // }else if(this.title.gj == 'userinfo_is_null'){
    //   this.$router.push('/Login');
    //   setCookie('userinfoRes','',-1);
    // }else if(this.title.gj == 'userinfo_banuse'){
    //   this.$router.push('/Login');
    //   setCookie('userinfoRes','',-1);
    // }
    // else if(this.title.gj == 'serviceid_is_null'){
    //   window.open('/Mall',_self);
    // } else if(this.title.gj == 'serviceid_error'){
    //   window.open('/Mall',_self);
    // }else if(this.title.gj == 'serviceinfo_is_null'){
    //   window.open('/Mall',_self);
    // }else if(this.title.gj == 'serviceinfo_banuse'){
    //   window.open('/Mall',_self);
    // }





    $(document).ready(function(){

      $('.hh-xgzl .div .bj').click(function(){
        $(this).toggleClass('select');
        $(this).siblings('strong').toggleClass('select');
        $(this).parent().siblings('.ycd').toggleClass('select');
        $(this).parent().siblings('.tx').toggleClass('select');
        if($(this).text()=='编辑'){
          $(this).html('展开<i></i>');
        }else if($(this).text()=='展开'){
          $(this).html('编辑<i></i>');
        }
      });
      $('.hh-zssc .sct li').hover(function(){
        $(this).siblings().removeClass('select');
        $(this).addClass('select');
      });

      $('.hh-xgzl .div .bc').click(function(){
        $(this).parent().parent().children('strong').removeClass('select');
      });

      $('.callct .ct table tbody tr').hover(function(){
        $(this).css('border-bottom','0px solid rgba(215, 219, 227, .4)')
        $(this).prev().css('border-bottom','0px solid rgba(215, 219, 227, .4)')
      },function(){
        $(this).css('border-bottom','1px solid rgba(215, 219, 227, .4)')
        $(this).prev().css('border-bottom','1px solid rgba(215, 219, 227, .4)')
      });


    })
  },
   methods:{
     dkgm:function(e1,e2){
       var _this = this;
       this.goumai.select = 1;
       _this.$axios.get('https://exam.zhonghaiqihang.com/PInterface/UserCenter/showNumBuyData',{
         params:{
           userid:e1,
           serviceid:e2
         }
       })
         .then(function(response){
           _this.goumai.title = response.data.servicename;
           _this.goumai.jifen = response.data.buyneedscore;
           _this.goumai.userjf = response.data.userscore;
           _this.goumai.id = e2;


         });

     },
     tzlj:function(e,e2){
       // this.$router.push('/ServiceDetails/'+e+'?name='+e2);
       let herf = '/ServiceDetails/'+e+'?name='+e2;
       window.open(herf,'_blank')
     },
     qh:function(e){
       this.selects = e;
       if(e==0){
         this.dingdans = this.title.qbdd;
       }else if(e==1){
         this.dingdans = this.title.zszdd;
       }else if(e==2){
         this.dingdans = this.title.gqdd;

       }
     },
     lingqu:function(e){
       var _this = this;
       if(confirm('确定兑换吗')){
         _this.$axios.post('api/PInterface/UserCenter/receiveFormSubmitInfo','userid='+_this.title.id+'&fsid='+e
         )
           .then(function(response){
             if(response.data == 'fsid_is_null'){
               _this.tcmsg =='ID不存在';
               $('.hh-login .tc').addClass('select');
               setTimeout(function(){//your codes
                 window.location.reload()
               },800);
             }else if(response.data == 'fsid_error'){
               _this.tcmsg =='ID错误';
               $('.hh-login .tc').addClass('select');
               setTimeout(function(){//your codes
                 window.location.reload()
               },800);

             }else if(response.data == 'formsubmitInfo_is_null'){
               _this.tcmsg =='数据未找到';
               $('.hh-login .tc').addClass('select');
               setTimeout(function(){//your codes
                 window.location.reload()
               },800);
             }else if(response.data == 'formsubmitInfo_banuse'){
               _this.tcmsg =='数据已被禁用';
               $('.hh-login .tc').addClass('select');
               setTimeout(function(){//your codes
                 window.location.reload()
               },800);
             }else{
               _this.tcmsg =response.data;
               $('.hh-login .tc').addClass('select');
               _this.$axios.get('https://exam.zhonghaiqihang.com/PInterface/UserCenter/allFormSubmitData?userid='+_this.title.id)
                 .then(function(response){
                   _this.title.all = response.data;
                   if(_this.$route.query.name == 'all'){
                     _this.dingdan = _this.title.all

                   }else if(_this.$route.query.name == 'me'){
                     _this.dingdan = _this.title.me;
                   }
                 });
               _this.$axios.get('https://exam.zhonghaiqihang.com/PInterface/UserCenter/myFormSubmitData?userid='+_this.title.id)
                 .then(function(response){
                   _this.title.me = response.data;
                   if(_this.$route.query.name == 'all'){
                     _this.dingdan = _this.title.all
                   }else if(_this.$route.query.name == 'me'){
                     _this.dingdan = _this.title.me;
                   }

                 });
               $('.tc').fadeIn(0);
               $('.tc').fadeOut(2000);
               setTimeout(function(){//your codes
                 window.location.reload()
               },500);
             }


           });
       }


     },
     tuihuan:function(e){
       var _this = this;
       _this.$axios.post('api/PInterface/UserCenter/returnFormSubmitInfo','userid='+_this.title.id+'&fsid='+e
       )
         .then(function(response) {

           _this.tcmsg = response.data;
           $('.hh-login .tc').addClass('select');
           $('.tc').fadeIn(0);
           $('.tc').fadeOut(2000);
           setTimeout(function(){//your codes
             window.location.reload()
           },500);
         });


     },
    qhs:function(e){
      this.select = e;
      if(e ==0){
        this.dingdan = this.title.all;
        $('.hh-grzx .left  li').removeClass('select');
        $('.hh-grzx .left .div6 .li1').addClass('select');
        this.sl2 = [1];
        let nb = Math.ceil(this.title.all?this.title.all.length/10:1);
        for (let i=1;i<= nb;i++){
          if(i>1){
            this.sl2.push(i);
          }
        }
      }else if(e == 1){
        this.dingdan = this.title.me;
        $('.hh-grzx .left  li').removeClass('select');
        $('.hh-grzx .left .div6 .li2').addClass('select');
        this.sl2 = [1];
        let nb = Math.ceil(this.title.me?this.title.me.length/10:1);
        for (let i=1;i<= nb;i++){
          if(i>1){
            this.sl2.push(i);
          }
        }
      }
      else if(e == 2){
        this.dingdan = [];
        $('.hh-grzx .left  li').removeClass('select');
        $('.hh-grzx .left .div6 .li3').addClass('select');
        this.sl2 = [1];
        let nb = 0;
        for (let i=1;i<= nb;i++){
          if(i>1){
            this.sl2.push(i);
          }
        }
      }
    },
    dkgm:function(e1,e2){
      var _this = this;
      this.goumai.select = 1;
      _this.$axios.get('https://exam.zhonghaiqihang.com/PInterface/UserCenter/showNumBuyData',{
        params:{
          userid:e1,
          serviceid:e2
        }
      })
        .then(function(response){
          _this.goumai.title = response.data.servicename;
          _this.goumai.jifen = response.data.buyneedscore;
          _this.goumai.userjf = response.data.userscore;
          _this.goumai.id = e2;


        });

    },
    shouc:function(e1,e2){

       var _this = this;
      function setCookie(cname,cvalue,exdays)
      {
        var d = new Date();
        d.setTime(d.getTime()+(exdays*24*60*60*1000));
        var expires = "expires="+d.toGMTString();
        document.cookie = cname + "=" + cvalue + "; " + expires;
      }
      _this.$axios.post('api/PInterface/UserCenter/collectOperation','userid='+e1+'&serviceid='+e2
      )
        .then(function(response){
          // _this.xianqu = response.data;

          if(response.data == 'go_signin'){
            setCookie('userinfoRes','',-1);
            _this.$router.push('/');

          }else if(response.data=='userid_error'){
            setCookie('userinfoRes','',-1);
            _this.$router.push('/');
          }else if(response.data=='serviceid_error'){
            setCookie('userinfoRes','',-1);
            window.open('/PersonalCenter/','_self');
          }else if(response.data== '收藏成功'){
            _this.tcmsg= '收藏成功';
            $('.hh-login .tc').addClass('select');
            $('.tc').fadeIn(0);
            $('.tc').fadeOut(2500);
            console.log(e1,e2)
            _this.$axios.get('https://exam.zhonghaiqihang.com/PInterface/UserCenter/serviceData?userid='+_this.title.id)
              .then(function(response){
                _this.title.gj = response.data;
                console.log(response.data)
              });
          }else if(response.data== '取消收藏成功'){
            $('.hh-login .tc').addClass('select');
            _this.$axios.get('https://exam.zhonghaiqihang.com/PInterface/UserCenter/serviceData?userid='+_this.title.id)
              .then(function(response){
                _this.title.gj = response.data;
                _this.tcmsg= '取消收藏成功';
                $('.hh-login .tc').addClass('select');
                $('.tc').fadeIn(0);
                $('.tc').fadeOut(2500);
                console.log(_this.title.sc)

                window.location.reload()
               for (var key in response.data) {
                  console.log(response.data[key])
                  console.log(key.collectServiceData )
               }
              });
          }

        });

    },
    gmjf:function(e1,e2){
      var _this = this;
      var sj;
      sj = 'userid='+e1+'&serviceid='+e2;
      _this.$axios.post('/api'+'/PInterface/UserCenter/showNumBuyOperation',sj)
        .then(function(response){
          _this.goumai.select = 0;
          // alert(response.data);
          _this.tcmsg= response.data;
          $('.tc').addClass('select');
          setTimeout(function(){//your codes
            window.location.reload()
          },800);


        });
    },
    gmgb:function(){

      this.goumai.select = 0;
    },
     tc:function(e1,e2,e3){
       var d = new Date();
       d.setTime(d.getTime()+(e3*24*60*60*1000));
       var expires = "expires="+d.toGMTString();
       document.cookie = e1 + "=" + e2 + "; " + expires;
       this.$router.push('/');
     },

   }

	}

</script>

<style scoped="scoped">

  .callct .ct tbody tr:hover td{
    color: #212529 !important
  }

  .callct .ct tr{
    border-bottom: 1px solid rgba(215, 219, 227, .4);
  }
  .callct .ct tr:last-child{
    border-bottom: 0px solid rgba(215, 219, 227, .4);
  }
    .callct .ct thead .tr1{
      border-bottom: 0px solid rgba(215, 219, 227, .4);
    }
    .callct .ct thead .tr1 th{
      color: #7C8396;
    }
  .hh-login{
    height: auto;
  }
  .cal_index_table .callct{
    margin-top: 0px;
  }
  .wsc{
    display: none;
  }
  .it2 .wsc.select{
    display: block;
  }

</style>
